<template>
  <div class="wrap" ref="ruleFormRef">
    <div class="types">
      <div class="title"><el-button type="primary" @click="show1 = true; popTitle = '新增数据'">新增技能</el-button>
        <h2>个人技能数据</h2>
      </div>
      <el-table :data="tableData1" border style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="work_type" label="类型" />
        <el-table-column prop="is_show" label="是否显示">
          <template #default="scope">
            <el-switch v-model="scope.row.is_show" :active-value="1" :inactive-value="2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #989595"
              @change="switchChange(scope.row, 1)" />
          </template>
        </el-table-column>
        <el-table-column label="排序">

          <template #default="scope">
            <el-input-number v-model="scope.row.short" :min="1" :max="1000" @change="handleChangeSort(scope.row, 1)" />
          </template>
        </el-table-column>
        <el-table-column label="Controllers">

          <template #default="scope">
            <el-button type="primary" size="small" @click="editData(scope.row, 1)">修改</el-button>
            <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" :icon="InfoFilled"
              icon-color="#626AEF" title="Are you sure to delete this?" @confirm="deletData1(scope.row, 1)">
              <template #reference>
                <el-button>Delete</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="types">
      <div class="title">
        <el-button type="primary" @click="show2 = true; popTitle = '新增数据'">新增个人网站链接</el-button>
        <h2>个人网站链接数据</h2>
      </div>
      <el-table :data="tableData2" border style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="url" label="链接"> </el-table-column>
        <el-table-column label="是否显示">

          <template #default="scope">
            <el-switch v-model="scope.row.is_show" :active-value="1" :inactive-value="2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #989595"
              @change="switchChange(scope.row, 2)" />
          </template>
        </el-table-column>
        <el-table-column prop="short" label="排序">

          <template #default="scope">
            <el-input-number v-model="scope.row.short" :min="1" :max="1000" @change="handleChangeSort(scope.row, 2)" />
          </template>
        </el-table-column>
        <el-table-column label="Controllers">

          <template #default="scope">
            <el-button type="primary" size="small" @click="editData(scope.row, 2)">修改</el-button>
            <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" :icon="InfoFilled"
              icon-color="#626AEF" title="Are you sure to delete this?" @confirm="deletData1(scope.row, 2)">
              <template #reference>
                <el-button>Delete</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="types">
      <div class="title">
        <el-button type="primary" @click="show3 = true; popTitle = '新增数据'">新增工作经历</el-button>
        <h2>工作经历数据</h2>
      </div>
      <el-table :data="tableData3" border style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="time" label="时间"> </el-table-column>
        <el-table-column prop="work_type" label="职位类型"> </el-table-column>
        <el-table-column prop="content" label="内容" width="500"> </el-table-column>
        <el-table-column label="是否显示" width="90">

          <template #default="scope">
            <el-switch v-model="scope.row.is_show" :active-value="1" :inactive-value="2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #989595"
              @change="switchChange(scope.row, 3)" />
          </template>
        </el-table-column>
        <el-table-column prop="short" label="排序">

          <template #default="scope">
            <el-input-number v-model="scope.row.short" :min="1" :max="1000" @change="handleChangeSort(scope.row, 3)" />
          </template>
        </el-table-column>
        <el-table-column label="Controllers">

          <template #default="scope">
            <el-button type="primary" size="small" @click="editData(scope.row, 3)">修改</el-button>
            <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" :icon="InfoFilled"
              icon-color="#626AEF" title="Are you sure to delete this?" @confirm="deletData1(scope.row, 3)">
              <template #reference>
                <el-button>Delete</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="types">
      <div class="title">
        <el-button type="primary" @click="show4 = true; popTitle = '新增数据'">新增项目经历</el-button>
        <h2>项目经历数据</h2>
      </div>
      <el-table :data="tableData4" border style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="time" label="时间"> </el-table-column>
        <el-table-column prop="work_type" label="职位类型"> </el-table-column>
        <el-table-column prop="content" label="内容" width="500"> </el-table-column>
        <el-table-column label="是否显示" width="90">

          <template #default="scope">
            <el-switch v-model="scope.row.is_show" :active-value="1" :inactive-value="2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #989595"
              @change="switchChange(scope.row, 4)" />
          </template>
        </el-table-column>
        <el-table-column prop="short" label="排序">

          <template #default="scope">
            <el-input-number v-model="scope.row.short" :min="1" :max="1000" @change="handleChangeSort(scope.row, 4)" />
          </template>
        </el-table-column>
        <el-table-column label="Controllers">

          <template #default="scope">
            <el-button type="primary" size="small" @click="editData(scope.row, 4)">修改</el-button>
            <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" :icon="InfoFilled"
              icon-color="#626AEF" title="Are you sure to delete this?" @confirm="deletData1(scope.row, 4)">
              <template #reference>
                <el-button>Delete</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="show1" :title="popTitle" destroy-on-close>
      <el-form :model="form1" ref="ruleFormRef" label-width="100" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form1.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分类" prop="work_type">
          <el-select v-model="form1.work_type" placeholder="Select">
            <el-option label="前端" value="前端" />
            <el-option label="后端" value="后端" />
            <el-option label="运维" value="运维" />
            <el-option label="基本信息" value="基本信息" />
            <el-option label="教育信息" value="教育信息" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="short">
          <el-input-number v-model="form1.short" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="是否显示" prop="show">
          <el-switch v-model="form1.show" active-value="1" inactive-value="2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #989595" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submitEvent1(ruleFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="show2" :title="popTitle" destroy-on-close>
      <el-form :model="form2" ref="ruleFormRef" label-width="100" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form2.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="链接" prop="url">
          <el-input v-model="form2.url" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序" prop="short">
          <el-input-number v-model="form2.short" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="是否显示" prop="show">
          <el-switch v-model="form2.show" active-value="1" inactive-value="2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #989595" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submitEvent2(ruleFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="show3" :title="popTitle" destroy-on-close>
      <el-form :model="form3" ref="ruleFormRef" label-width="100" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form3.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="时间" prop="time">
          <el-input v-model="form3.time" autocomplete="off" />
        </el-form-item>
        <el-form-item label="职位类型" prop="work_type">
          <el-input v-model="form3.work_type" autocomplete="off" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" :row="8" v-model="form3.content" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序" prop="short">
          <el-input-number v-model="form3.short" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="是否显示" prop="show">
          <el-switch v-model="form3.show" active-value="1" inactive-value="2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #989595" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submitEvent3(ruleFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="show4" :title="popTitle" destroy-on-close>
      <el-form :model="form4" ref="ruleFormRef" label-width="100" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form4.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="时间" prop="time">
          <el-input v-model="form4.time" autocomplete="off" />
        </el-form-item>
        <el-form-item label="职位类型" prop="work_type">
          <el-input v-model="form4.work_type" autocomplete="off" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" :row="8" v-model="form4.content" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序" prop="short">
          <el-input-number v-model="form4.short" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="是否显示" prop="show">
          <el-switch v-model="form4.show" active-value="1" inactive-value="2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #989595" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submitEvent4(ruleFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import { GetPersonalData, AddJineng, EditJineng, AddXiangMu, EditXiangMu, AddWangZhan, EditWangZhan, AddGongZuo, EditGongZuo, ChangeShow, ChangeShort, DeleteData } from '../apis/personal'
const ruleFormRef = ref<FormInstance>()
  interface Q {
  id:string
  short:number
}
let tableData1 = ref<Q[]>([])
let tableData2 = ref([])
let tableData3 = ref([])
let tableData4 = ref([])
let popTitle = ref('新增数据')
let show1 = ref(false)
let show2 = ref(false)
let show3 = ref(false)
let show4 = ref(false)
let form1 = reactive({
  title: '',
  work_type: '',
  show: '1',
  short: 1,
})
let form2 = reactive({
  title: '',
  url: '',
  show: '1',
  short: 1,
})
let form3 = reactive({
  title: '',
  time: '',
  work_type: '',
  content: '',
  show: '1',
  short: 1,
})
let form4 = reactive({
  title: '',
  time: '',
  work_type: '',
  content: '',
  show: '1',
  short: 1,
})
let rules = reactive({
  title: [
    { required: true, message: '标题必填', trigger: 'blur' },
    { min: 1, max: 60, message: '标题长度1～60', trigger: 'blur' }
  ],
  time: [
    { required: true, message: '工作时间必填', trigger: 'blur' },
  ],
  work_type: [
    { required: true, message: '职位分类必选', trigger: 'blur' },
  ]
})
const close = () => {
  show1.value = false
  show2.value = false
  show3.value = false
  show4.value = false
  form1 = reactive({
    title: '',
    work_type: '',
    show: '1',
    short: 1,
  })
  form2 = reactive({
    title: '',
    url: '',
    show: '1',
    short: 1,
  })
  form3 = reactive({
    title: '',
    content: '',
    time: '',
    work_type: '',
    show: '1',
    short: 1,
  })
  form4 = reactive({
    title: '',
    content: '',
    time: '',
    work_type: '',
    show: '1',
    short: 1,
  })
}
const editData = (row, num) => {
  console.log(row)
  if (num == 1) {

    form1 = reactive({
      id: row.id,
      title: row.title,
      work_type: row.work_type,
      show: row.is_show + '',
      short: row.short,
    })
    show1.value = true
  } else if (num == 2) {

    form2 = reactive({
      ...row,
      show: row.is_show + '',
    })
    show2.value = true
  } else if (num == 3) {
    form3 = reactive({
      ...row,
      show: row.is_show + '',
    })
    show3.value = true
  } else if (num == 4) {
    form4 = reactive({
      ...row,
      show: row.is_show + '',
    })
    show4.value = true
  }
  popTitle.value = "修改数据"
}
const switchChange = async (scope, num) => {

  if (num == 1) {
    let res = await ChangeShow({
      id: scope.id,
      work_type: "jineng",
      show: scope.is_show
    })
  } else if (num == 2) {
    let res = await ChangeShow({
      id: scope.id,
      work_type: "wangzhan",
      show: scope.is_show
    })
  } else if (num == 3) {
    let res = await ChangeShow({
      id: scope.id,
      work_type: "gongzuo",
      show: scope.is_show
    })
  } else if (num == 4) {
    let res = await ChangeShow({
      id: scope.id,
      work_type: "xiangmu",
      show: scope.is_show
    })
  }
}
const handleChangeSort = async (row, num) => {
  if (num == 1) {
    let res = await ChangeShort({
      id: row.id,
      work_type: "jineng",
      short: row.short
    })
  } else if (num == 2) {
    let res = await ChangeShort({
      id: row.id,
      work_type: "wangzhan",
      short: row.short
    })
  } else if (num == 3) {
    let res = await ChangeShort({
      id: row.id,
      work_type: "gongzuo",
      short: row.short
    })
  } else if (num == 4) {
    let res = await ChangeShort({
      id: row.id,
      work_type: "xiangmu",
      short: row.short
    })
  }
}
const deletData1 = async (row, num) => {
  if (num == 1) {
    let res = await DeleteData({
      id: row.id,
      work_type: "jineng"
    })
    if (res.status == 200) {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      getDate()
    }
  } else if (num == 2) {
    let res = await DeleteData({
      id: row.id,
      work_type: "wangzhan"
    })
    if (res.status == 200) {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      getDate()
    }
  } else if (num == 3) {
    let res = await DeleteData({
      id: row.id,
      work_type: "gongzuo"
    })
    if (res.status == 200) {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      getDate()
    }
  } else if (num == 4) {
    let res = await DeleteData({
      id: row.id,
      work_type: "xiangmu"
    })
    if (res.status == 200) {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      getDate()
    }
  }
}
const submitEvent1 = async (ruleFormRef) => {
  await ruleFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (popTitle.value == "新增数据") {
        let res = await AddJineng(form1)
        if (res.status == 200) {
          ElMessage({
            message: '新增成功',
            type: 'success',
          })
          show1.value = false
          getDate()
          form1 = reactive({
            title: '',
            work_type: '',
            show: '1',
            short: 1,
          })
        }
      } else {
        let res = await EditJineng(form1)
        if (res.status == 200) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          show1.value = false
          getDate()
          form1 = reactive({
            title: '',
            work_type: '',
            show: '1',
            short: 1,
          })
        }
      }
      popTitle.value = "新增数据"
    }
  })
}
const submitEvent2 = async (ruleFormRef) => {
  await ruleFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (popTitle.value == "新增数据") {
        let res = await AddWangZhan(form2)
        if (res.status == 200) {
          ElMessage({
            message: '新增成功',
            type: 'success',
          })
          show2.value = false
          getDate()
          form2 = reactive({
            title: '',
            url: '',
            show: '1',
            short: 1,
          })
        }
      } else {
        let res = await EditWangZhan(form2)
        if (res.status == 200) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          show2.value = false
          getDate()
          form2 = reactive({
            title: '',
            url: '',
            show: '1',
            short: 1,
          })
        }
      }
    }
  })
}
const submitEvent3 = async (ruleFormRef) => {
  await ruleFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (popTitle.value == "新增数据") {
        let res = await AddGongZuo(form3)
        if (res.status == 200) {
          ElMessage({
            message: '新增成功',
            type: 'success',
          })
          show3.value = false
          getDate()
          form3 = reactive({
            title: '',
            content: '',
            time: '',
            work_type: '',
            show: '1',
            short: 1,
          })
        }
      } else {
        let res = await EditGongZuo(form3)
        if (res.status == 200) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          show3.value = false
          getDate()
          form3 = reactive({
            title: '',
            content: '',
            time: '',
            work_type: '',
            show: '1',
            short: 1,
          })
        }
      }
    }
  })
}
const submitEvent4 = async (ruleFormRef) => {
  await ruleFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (popTitle.value == "新增数据") {
        let res = await AddXiangMu(form4)
        if (res.status == 200) {
          ElMessage({
            message: '新增成功',
            type: 'success',
          })
          show4.value = false
          getDate()
          form4 = reactive({
            title: '',
            content: '',
            time: '',
            work_type: '',
            show: '1',
            short: 1,
          })
        }
      } else {
        let res = await EditXiangMu(form4)
        if (res.status == 200) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          show4.value = false
          getDate()
          form4 = reactive({
            title: '',
            content: '',
            time: '',
            work_type: '',
            show: '1',
            short: 1,
          })
        }
      }
    }
  })
}

const getDate = async () => {
  let res = await GetPersonalData({})
  if (res.status == 200) {
    let qianduan:Q[]=[]
    let houduan:Q[]=[]
    let yunwei:Q[]=[]
    res.data.jineng.forEach(item=>{
      if(item.work_type=="前端"){
        qianduan.push({...item})
      }else if(item.work_type=="后端"){
        houduan.push({...item})
      }else{
        yunwei.push({...item})
      }
    })
    qianduan.sort((a,b)=>a.short-b.short)
    houduan.sort((a,b)=>a.short-b.short)
    yunwei.sort((a,b)=>a.short-b.short)
    tableData1.value = [...qianduan,...houduan,...yunwei]
    tableData2.value = res.data.wangzhan.sort((a,b)=>a.short-b.short)
    tableData3.value = res.data.gongzuo.sort((a,b)=>a.short-b.short)
    tableData4.value = res.data.xiangmu.sort((a,b)=>a.short-b.short)
  }
}
onMounted(async () => {
  getDate()
})
</script>

<style lang="less" scoped>
.wrap {
  box-sizing: border-box;
  padding: 10px;
}

.types {
  margin-bottom: 10px;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      width: 60%;
    }
  }
}
</style>